<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model.trim="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model.trim="form.phoneNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model.trim="form.password"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item v-show="!form.id" label="确认密码" prop="passwordConfirm">
        <el-input
          v-model.trim="form.passwordConfirm"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="permissions">
        <el-radio-group v-model="form.roleId">
          <el-radio :label="9">Admin</el-radio>
          <el-radio :label="2">Staff</el-radio>
          <el-radio :label="3">Kefu</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { register, checkUser } from '@/api/user'

export default {
  name: 'UserManagementEdit',
  data() {
    //检查设备用户名
    let checkUserName = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      }

      let res = await checkUser({
        username: value,
      })
      if (res) {
        return callback(new Error('该用户名已经存在'))
      }

      return callback()
    }

    //检查手机号码
    let checkPhoneNumber = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号码'))
      }

      let res = await checkUser({
        phoneNumber: value,
      })

      if (res) {
        return callback(new Error('该手机号码已经存在'))
      }
      return callback()
    }

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.confirmPassword !== '') {
          this.$refs.form.validateField('passwordConfirm')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      form: {
        id: '',
        username: '',
        password: '',
        passwordConfirm: '',
        phoneNumber: '',
        roleId: 2,
      },
      queryForm: {
        pageNo: 1,
        pageSize: 20,
      },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入用户名' },
          {
            required: true,
            trigger: 'blur',
            validator: checkUserName,
          },
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' },
          { validator: validatePass, trigger: 'blur' },
        ],
        passwordConfirm: [
          { required: true, trigger: 'blur', message: '请再次输入密码' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', message: '请输入手机号码' },
          {
            required: true,
            trigger: 'blur',
            validator: checkPhoneNumber,
          },
        ],
        roleId: [{ required: true, trigger: 'blur', message: '请选择角色' }],
      },
      title: '',
      departmentList: null,
      dialogFormVisible: false,
    }
  },
  created() {},
  methods: {
    showEdit(row) {
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
      }
      this.dialogFormVisible = true
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          let msg = ''
          if (this.form.id > 0) {
          } else {
            msg = '用户创建成功'
            await register(this.form)
          }
          this.$baseMessage(msg, 'success')
          this.$emit('fetch-data')
          this.close()
        } else {
          return false
        }
      })
    },
  },
}
</script>
